<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="createVidoe()">创建视频</button>
        <button onclick="flyTo()">flyTo</button>
        <button onclick="locate()">locate</button>
        <button onclick="updateUrl()">updateUrl</button>
        <button onclick="play()">play</button>
        <button onclick="pause()">pause</button>
        <button onclick="isShow()">显示隐藏投影内容</button>
        <button onclick="debugFrustum()">是否显示视锥线</button>
        <button onclick="fov()">宽高比例</button>
        <button onclick="aspectRatio()">水平拉伸</button>
        <button onclick="dis()">距离</button>
        <button onclick="rotateCamera()">微调相机(支持上下左右微调)</button>
        <button onclick="params()">获得参数</button>
        <button onclick="removeVideo()">移除</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    
    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                {
                    type: "TDTImageryLayer",
                    mold: "image",
                    tk: "7b435c61bff7f77eb49206e10d6397bd",
                },
            ],
            camera: {
                "position": {
                    x: 119.31201460288875,
                    y: 26.05787315361957,
                    z: 100,
                },
                angle: {
                    "heading": 180, "pitch": -20, "roll": 0
                }
            },
        });

        function  createVidoe() {
            map.viewer.scene.postProcessStages.fxaa.enabled = true;
            map.viewer.scene.globe.depthTestAgainstTerrain = true;//一定要地面以下不可见
            const option = {
                url: "../videos/1.mp4",//方式1
                // dom:document.getElementById("视频的id"),//方式2
                "camera": {
                    "position": {
                        x: -2806985.3026418625,
                        y: 4999540.287455181,
                        z: 2784665.5442590816
                    },
                    "direction": { "x": -0.20300781957546601, "y": 0.3881445982693198, "z": -0.8989613985180693 },
                    "up": { "x": -0.41112481743883666, "y": 0.7994469141644973, "z": 0.43801942413407347 },
                    "right": { "x": 0.8886867894129509, "y": 0.4585067090754624, "z": -0.0027180978075245542 }
                },
                "fov": 0.9075712110370514,
                "dis": 70,
                "stRotation": 0,
                "frustumShow": true,
                "aspectRatio": 3,
            }
            videoSpace = new cpc.VideoSpace("投影", option);
            map.add(videoSpace);
        }
        function  flyTo() {
            videoSpace.flyTo(3,-10,0,300);
        }
        function  locate() {
            videoSpace.locate();
        }
        function  isShow() {
            videoSpace.show = !videoSpace.show;
        }
        function debugFrustum() {
            videoSpace.debugFrustum = !videoSpace.debugFrustum;
        }
        function  updateUrl() {
            videoSpace.url = "../videos/big_buck_bunny.mp4";
        }
        function  dis() {
            videoSpace.dis = 40;
        }
        function play() {
            videoSpace.play = true;
        }
        function pause() {
            videoSpace.play = false;
        }
        function aspectRatio() {
            videoSpace.aspectRatio = 1.5;
        }
       
        function  fov() {
            videoSpace.fov =1.2;
        }
        function  rotateCamera() {
            videoSpace.rotateCamera(cpc.EVideoSpace.LEFT, 5);;
        }
        function  params() {
            console.log("当前摄像头的参数为:", videoSpace.params);
        }
       function removeVideo() {
            map.remove(videoSpace);
        }
    </script>
</body>

</html>